<template>
  <view>
    <view
      class="listItem u-flex"
      v-for="(item, index) in list"
      :key="index"
      @click="toLivePlay(item,index)"
    >
      <view class="thumb">
        <image
          :src="
            item.roomImage
              ? item.roomImage
              : item.video_url + '?x-oss-process=video/snapshot,t_480,f_jpg'
          "
        >
        </image>
        <view class="tags u-flex">
          <view class="u-flex u-p-b-5 u-p-l-5">
            <image src="@/static/img/index/play.png" class="playIcon"></image>
            {{ item.video_time == 7200 ? ' 120:00' : format(item.video_time) }}
          </view>
        </view>
      </view>
      <view class="caption u-flex-1">
        <view class="roomName u-line-1">{{ item?.roomName }}</view>
        <view class="viewNum">观看人数： {{ item?.userCount }}</view>
        <view class="time">{{ item.openTime }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)
import { ref, nextTick, reactive } from 'vue'
import { navigateTo } from '@/utils'
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
import { lrpvlApi } from '@/api/social/index'
const roomId = ref()
const params = ref({
  page: 1,
  limit: 20,
})
const list = ref()
const userId = ref()
onLoad((options) => {
  if (options.roomId) {
    console.log(12)
    roomId.value = options.roomId
    params.value.id = options.roomId
    params.value.uid = options.userId
    getList()
  }
  if (options.userId) {
    userId.value = options.userId
  }
})

const getList = () => {
  lrpvlApi(params.value).then((res) => {
    list.value = res.data.data
  })
}
const format = (date) => {
  console.log(date, dayjs.duration(date, 'seconds').format('mm:ss'))
  return dayjs.duration(date, 'seconds').format('mm:ss')
}
const toLivePlay = (row,index) => {
  navigateTo(`/social/video/livePlayback?roomId=${row.roomId}&userId=${userId.value}&index=${index}`)
}
</script>

<style>
page {
  background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.listItem {
  width: 702rpx;
  height: 240rpx;
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin: 20rpx auto;
  padding: 20rpx;

  .thumb {
    width: 160rpx;
    height: 200rpx;
    border-radius: 10rpx;
    margin-right: 20rpx;
    position: relative;

    image {
      display: block;
      width: 160rpx;
      height: 200rpx;
      border-radius: 10rpx;
    }

    .tags {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 160rpx;
      height: 80rpx;
      background: linear-gradient(180deg, rgba(51, 51, 51, 0) 0%, rgba(51, 51, 51, 0.7) 100%);
      border-radius: 0rpx 0rpx 10rpx 10rpx;
      font-size: 20rpx;
      color: #ffffff;
      align-items: end;

      .playIcon {
        width: 26rpx;
        height: 26rpx;
      }
    }
  }

  .caption {
    height: 200rpx;

    .roomName {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      padding-top: 10rpx;
    }

    .viewNum {
      width: 193rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;
      padding-top: 34rpx;
    }

    .time {
      font-weight: 400;
      font-size: 26rpx;
      color: #666666;
      line-height: 30rpx;
      padding-top: 34rpx;
    }
  }
}
</style>
